<!-- <template>
  <div class="dashboard-container">
    <component :is="currentRole" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import editorDashboard from './editor'

export default {
  name: 'Dashboard',
  components: { adminDashboard, editorDashboard },
  data() {
    return {
      currentRole: 'adminDashboard'
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    // if (!this.roles.includes('admin')) {
    //   this.currentRole = 'editorDashboard'
    // }
  }
}
</script> -->
<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <!-- 饼图：风险等级分布 -->
      <el-col :span="8">
        <el-card>
          <div slot="header">风险等级分布</div>
          <div ref="riskPie" style="height: 300px;"></div>
        </el-card>
      </el-col>

      <!-- 条形图：风险数量统计 -->
      <el-col :span="8">
        <el-card>
          <div slot="header">风险数量统计</div>
          <div ref="riskBar" style="height: 300px;"></div>
        </el-card>
      </el-col>

      <!-- 折线图：风险变化趋势 -->
      <el-col :span="8">
        <el-card>
          <div slot="header">风险变化趋势</div>
          <div ref="riskLine" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <!-- 饼图：问题类型占比 -->
      <el-col :span="8">
        <el-card>
          <div slot="header">问题类型占比</div>
          <div ref="issuePie" style="height: 300px;"></div>
        </el-card>
      </el-col>

      <!-- 柱状图：宿舍楼风险排名 -->
      <el-col :span="8">
        <el-card>
          <div slot="header">宿舍楼风险排名</div>
          <div ref="buildingRisk" style="height: 300px;"></div>
        </el-card>
      </el-col>

      <!-- 仪表盘图：整改进度 -->
      <el-col :span="8">
        <el-card>
          <div slot="header">整改完成率</div>
          <div ref="progressGauge" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      charts: {}
    }
  },
  mounted() {
    this.initCharts()
  },
  beforeDestroy() {
    Object.values(this.charts).forEach(chart => chart.dispose())
  },
  methods: {
    initCharts() {
      this.charts.riskPie = echarts.init(this.$refs.riskPie)
      this.charts.riskPie.setOption({
        title: { text: '风险分布', left: 'center' },
        tooltip: { trigger: 'item' },
        legend: { orient: 'vertical', left: 'left' },
        series: [{
          type: 'pie',
          radius: '60%',
          data: [
            { value: 10, name: 'Ⅰ级风险' },
            { value: 20, name: 'Ⅱ级风险' },
            { value: 35, name: 'Ⅲ级风险' },
            { value: 50, name: 'Ⅳ级风险' }
          ]
        }]
      })

      this.charts.riskBar = echarts.init(this.$refs.riskBar)
      this.charts.riskBar.setOption({
        xAxis: { type: 'category', data: ['Ⅰ级', 'Ⅱ级', 'Ⅲ级', 'Ⅳ级'] },
        yAxis: { type: 'value' },
        series: [{
          data: [10, 20, 35, 50],
          type: 'bar',
          itemStyle: { color: '#409EFF' }
        }]
      })

      this.charts.riskLine = echarts.init(this.$refs.riskLine)
      this.charts.riskLine.setOption({
        xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五'] },
        yAxis: { type: 'value' },
        series: [{
          data: [5, 15, 20, 10, 30],
          type: 'line',
          smooth: true
        }]
      })

      this.charts.issuePie = echarts.init(this.$refs.issuePie)
      this.charts.issuePie.setOption({
        tooltip: { trigger: 'item' },
        legend: { top: '5%', left: 'center' },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: 15, name: '电器问题' },
            { value: 20, name: '通道堵塞' },
            { value: 30, name: '卫生问题' },
            { value: 10, name: '心理隐患' }
          ]
        }]
      })

      this.charts.buildingRisk = echarts.init(this.$refs.buildingRisk)
      this.charts.buildingRisk.setOption({
        xAxis: { type: 'category', data: ['1号楼', '2号楼', '16号楼', '27号楼'] },
        yAxis: { type: 'value' },
        series: [{
          data: [40, 32, 18, 12],
          type: 'bar',
          itemStyle: { color: '#FF5722' }
        }]
      })

      this.charts.progressGauge = echarts.init(this.$refs.progressGauge)
      this.charts.progressGauge.setOption({
        series: [{
          type: 'gauge',
          progress: { show: true },
          detail: { valueAnimation: true, formatter: '{value}%' },
          data: [{ value: 78, name: '完成率' }]
        }]
      })
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
  background: #0a0a23;
  color: #fff;
}
.el-card {
  background-color: #1e1e3f;
  color: #fff;
  border: none;
}
.el-card__header {
  font-weight: bold;
  font-size: 16px;
  color: #ffd700;
}
</style>

